import React, { PureComponent } from 'react'
import { Modal, Table, Pagination } from 'antd'
export default class SelectQuestionModal extends PureComponent<any, any> {
    hideHandle = () => {
        const { type, hideSelectQuestionModal } = this.props;
        hideSelectQuestionModal(type)
    }
    changePage = (e: number, size: any) => {
        const { type, changeQuestionListPage } = this.props;
        const gettype = () => {
            if (type === 'singleModal') return '1';
            if (type === 'batchModal') return '2';
            if (type === 'judgeModal') return '3';
        }
        changeQuestionListPage(e, gettype(), size)
    }
    rowSelect = (e: any) => {
        this.props.rowSelect(e)
    }
    confirmSelected = () => {
        const { type, confirmSelected } = this.props;
        confirmSelected(type)
    }
    render() {
        const { pageSize, visible, type, questionListData, questionListCount, questionListPage, selectedRowKeys, changeSelectedRowKeys, questionLoading } = this.props;
        const columns = [
            {
                title: '题号',
                dataIndex: 'id',
            },
            {
                title: '试题内容',
                dataIndex: 'content',
                render: (content) => {
                    return <p style={{ width: 700 }}>{content}</p>
                }
            },
            {
                title: '难易程度',
                dataIndex: 'complexity',
                render: (complexity: any) => {
                    if (complexity === 1) return '容易'
                    if (complexity === 2) return '较易'
                    if (complexity === 3) return '中等'
                    if (complexity === 4) return '较难'
                    if (complexity === 5) return '难'

                }
            },
        ]
        const title = () => {
            if (type === 'singleModal') return '单选';
            if (type === 'batchModal') return '多选';
            if (type === 'judgeModal') return '判断';
        }
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys) => {
                changeSelectedRowKeys(selectedRowKeys)
            }
        }

        return (
            <Modal width={1000} visible={visible} title={`选择${title()}题`} onCancel={this.hideHandle} onOk={this.confirmSelected}>
                <div style={{ height: 600, overflow: 'auto' }}>
                    <Table rowSelection={rowSelection} loading={questionLoading} onRow={record => {
                        return {
                            onClick: e => { this.rowSelect(record) }, // 点击行
                        };
                    }} columns={columns} rowKey="id" size="small" dataSource={questionListData} pagination={false} />
                </div>
                <div style={{ height: 50 }}>
                    <p style={{
                        float: 'left',
                        marginTop: 30
                    }}>已选 {selectedRowKeys.length}道</p>
                    <Pagination total={questionListCount} 
                    showTotal={(total, range) => `${range[0]}条-${range[1]}条， 共 ${total} 条`}
                    showSizeChanger={true} pageSize={pageSize} onChange={this.changePage} pageSizeOptions={['10','20','30','50','70','100']} current={questionListPage} style={{ float: 'right', marginTop: 25, marginBottom: 10 }} size="small" showQuickJumper />
                </div>
            </Modal>
        )
    }
}
